<!-- Navigation -->
{% if page.nav-style == "invert" or page.header-style == "text" %}
<nav class="navbar navbar-default navbar-custom navbar-fixed-top invert">
{% else %}
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
{% endif %}
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header page-scroll">
      <!-- navbar toggle for old mobile menu button (by Hux) -->
      <!-- <button type="button" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button> -->
      <a class="navbar-brand" href="{{ site.baseurl }}/">$ cd /home/</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div id="huxblog_navbar">
      <div class="navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          {% for page in site.menus %}
          <li>
            {% if page.url %}
            <a href="{{ page.url | prepend: site.baseurl }}" class="faa-parent animated-hover">
            {% else %}
            <a class="faa-parent animated-hover">
            {% endif %}
              {% if page.font %}
              <i class="{{page.font}} fa-lg faa-wrench"></i>
              {% endif %}
              {{ page.title }}
            </a>
            {% if page.submenus %}
            <ul class="sub-menu">
              {% for submenu in page.submenus %}
              <li>
                <a href="{{ submenu.url | prepend: site.baseurl }}" class="faa-parent animated-hover">
                <i class="{{submenu.font}} fa-lg faa-wrench"></i>
                {{ submenu.title }}
                </a>
              </li>
              {% endfor %}
            </ul>
            {% endif %}
          </li>
          {% endfor %}

          <li>
            <a id="search-btn" class="faa-parent animated-hover">
              <i class="fas fa-search fa-lg faa-wrench"></i> Search
            </a>
          </li>
        </ul>
      </div>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>

<!-- Old Mobile Navbar Script (By Hux) -->
<!-- <script>
  // Drop Bootstarp low-performance Navbar
  // Use customize navbar with high-quality material design animation
  // in high-perf jank-free CSS3 implementation
  var $body   = document.body;
  var $toggle = document.querySelector(".navbar-toggle");
  var $navbar = document.querySelector("#huxblog_navbar");
  var $collapse = document.querySelector(".navbar-collapse");

  var __HuxNav__ = {
    close: function() {
      $navbar.className = " ";
      // wait until animation end.
      setTimeout(function() {
        // prevent frequently toggle
        if($navbar.className.indexOf("in") < 0) {
          $collapse.style.height = "0px"
        }
      },400)
    },
    open: function() {
      $collapse.style.height = "auto"
      $navbar.className += " in";
    }
  }

  // Bind Event
  $toggle.addEventListener("click", function(e) {
    if ($navbar.className.indexOf("in") > 0) {
      __HuxNav__.close()
    } else {
      __HuxNav__.open()
    }
  })

  /**
    * Since Fastclick is used to delegate "touchstart" globally
    * to hack 300ms delay in iOS by performing a fake "click",
    * Using "e.stopPropagation" to stop "touchstart" event from
    * $toggle/$collapse will break global delegation.
    *
    * Instead, we use a "e.target" filter to prevent handler
    * added to document close HuxNav.
    *
    * Also, we use "click" instead of "touchstart" as compromise
    */
  document.addEventListener("click", function(e){
    if(e.target == $toggle) return;
    if(e.target.className == "icon-bar") return;
    __HuxNav__.close();
  })
</script> -->
